<template>
  <div>
    <div style="color: darkorange;font-size:small;height:30px">
      <el-input v-model="saleId" class="input" placeholder="订单编号"></el-input>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-input v-model="ticId" class="input" placeholder="车票编号"></el-input>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <el-button class="botton" @click="loadSale()">搜索</el-button>
    </div>
    <div style="margin-top:8px;margin-bottom:15px;"></div>
    <div class="big">
      <el-table :data="tableData" :row-style="{ color: 'darkorange', height: '60px' }" border style="width: 100%">
        <el-table-column :formatter="formatDate" label="购票时间" prop="saleTime">
        </el-table-column>
        <el-table-column label="发车站" prop="ticket.train.startLocation">
        </el-table-column>
        <el-table-column label="终点站" prop="ticket.train.endLocation">
        </el-table-column>
        <el-table-column label="车次编号" prop="ticket.train.trainId">
        </el-table-column>
        <el-table-column label="车票编号" prop="ticket.ticketId">
        </el-table-column>
        <el-table-column fixed="right" label="操作" style="border: 1px solid darkorange;" width="100px">
          <template slot-scope="scope">
            <div class="edit_delete">
              <el-button icon="el-icon-edit" type="warning" @click="refTic(scope.row.ticket.ticketId)">退票</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="padding: 10px 0;text-align:center">
      <el-pagination :current-page="page" :total="total" background
                     class="white-list-tool" layout="total,prev, pager, next, jumper"
                     @current-change="handleCurrentChange">
      </el-pagination>
    </div>

  </div>
</template>

<script>
export default {
  props: ['headerId'],
  data() {
    return {
      tableData: [],
      total: 0,
      page: 1,
      saleId: '',
      ticId: '',
    }
  },
  methods: {
    async refTic(ticketId) {
      await this.$http.get("/ticRef", {
        params: {
          ticketId: ticketId,
          userId: this.headerId

        }
      })
      this.loadSale()
    },
    formatDate(row, column) {
      let data = row[column.property]
      if (data == null) {
        return null
      }
      let dt = new Date(data)
      return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
    },
    loadSale() {
      this.$http.get("/selectSale", {
        params: {
          saleId: this.saleId,
          ticketId: this.ticId,
          userId: this.headerId,
          page: this.page,
        }
      }).then((response) => {
        this.tableData = response.data
      })
      this.$http.get("/getSaleRowCount", {
        params: {
          saleId: this.saleId,
          ticketId: this.ticId,
          userId: this.headerId,
        }
      }).then((response) => {
        this.total = response.data
      })
    },
    handleCurrentChange(page) {
      this.page = page
      this.loadSale()
    },
  },
  created() {
    this.loadSale()
  },
}
</script>

<style scoped>
::v-deep .el-dialog {
  height: 30%;
  background-color: #525151;
  border: 1px solid darkorange;
}

::v-deep .el-dialog__title {
  color: darkorange;
  caret-color: transparent;
}

.input3 /deep/ .el-input__inner {
  margin: 5px;
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
  width: 150px;
}

.input /deep/ .el-input__inner {
  background-color: #525151;
  border: 1px solid darkorange;
  color: darkorange;
  width: 150px;
}

.botton {
  color: darkorange;
  background-color: #525151;
  border-color: darkorange;
}

.botton:hover,
.botton:focus {
  background: rgb(255, 200, 133);
  border-color: darkorange;
  color: black;
}

.big {
  border: 1px solid darkorange;

}

::v-deep .el-table th {
  border: 1px solid darkorange !important;
  border-right: none !important;
  border-bottom: none !important;
  background-color: #525151;
}

::v-deep.el-table thead {
  color: darkorange;
  font-weight: 500;
  border: 1px solid darkorange;
}

::v-deep .el-table tr {
  background-color: #525151;
}

::v-deep .el-table td,
.building-top .el-table th.is-leaf {
  border: 1px solid darkorange;
  border-right: none !important;
}

::v-deep .el-table::before {
  border: 1px solid darkorange;
  height: 0;
}

::v-deep .el-table td,
.el-table th {
  text-align: center;
}

.el-input {
  width: 100px;
  margin-bottom: 20px;
}

.el-table {
  border: 1px solid darkorange;
  margin: 0 auto;
  font-size: 15px;
}
</style>